<template>
  <div class="goodsinfo-container">
      <transition 
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
          <div class="ball" v-show="ballFlag" ref="ball"></div>
      </transition>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <!-- 轮播区域 -->
          <swiper :swipelist="swipelist" :isfull="false"></swiper>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">{{info.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>
            市场价：
            <span class="old">￥{{info.market_price}}</span>
            销售价：
            <span class="new">￥{{info.sell_price}}</span>
          </p>
          <p>
            购买数量：
            <numberbox @getCount="getselectedCount" :max="info.stock_quantity"></numberbox>
          </p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addtoShopcar()">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{info.goods_no}}</p>
          <p>库存情况：{{info.stock_quantity}}</p>
          <p>上架时间：{{info.add_time | dateFormat}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <p>
          <mt-button type="primary" size="large" plain @click="goDesc()">图文介绍</mt-button>
        </p>
        <p>
          <mt-button type="danger" size="large" plain @click="goComment()">商品评论</mt-button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import swipelist from "../subcomponents/swipelist.vue";
import numberbox from "../subcomponents/goodsinfo_numberbox.vue";
import {Toast} from "mint-ui";
export default {
  data() {
    return {
      swipelist: [],
      info: {},
      ballFlag:false,
      selectedcount:1
    };
  },
  created() {
    this.getLunbo();
    this.getInfo();
  },
  methods: {
    getLunbo() {
      // 轮播图方法
      this.$http
        .get("api/getthumimages/" + this.$route.params.id)
        .then(result => {
          if (result.body.status === 0) {
            this.swipelist = result.body.message;
          }
        });
    },
    getInfo() {
      this.$http
        .get("api/goods/getinfo/" + this.$route.params.id)
        .then(result => {
          if (result.body.status === 0) {
            this.info = result.body.message[0];
          }
        });
    },
    goDesc() {
      // 点击使用编程式导航跳转页面 图文介绍页面
      this.$router.push({ name: "/home/goodsdesc", params: this.$route.params.id });
    },
    goComment() {
      this.$router.push({ name: "/home/goodscomment", params: this.$route.params.id });
    },
    addtoShopcar(){
         // 进行简单的判断数量是否大于库存量
        if(parseInt(this.selectedcount)>parseInt(this.info.stock_quantity))
        {
            Toast("库存不足！")
            return;
        }
        this.ballFlag=!this.ballFlag;
        // 拼接出一个要保存到car数组里的商品的对象
        var goodsinfo={id:this.$route.params.id,count:this.selectedcount,price:this.info.sell_price,selected:true}
        // 调用store中的mutitions来将商品加入购物车
        this.$store.commit('addToCar',goodsinfo);
    },
    beforeEnter(el){
        el.style.transform="translate(0,0)";
    },
    enter(el,done){
        // 小球动画优化思路：
        // 1.小球动画不准确原因，把移动的参数写死了
        // 2.只要分辨率和测试的时候不一样，或者滚动条有一定的滚动距离之后，问题就出现了
        // 3.因此，不能把小球的位移写死，而是应该动态计算得到结果
        // 4.经过分析，得到解题思路，先得到徽标的横纵坐标，再得到小球的横纵坐标，让y值求差
        // x值求差得到结果，就是位移距离
        // 5.如何获取徽标和小球的位置？？  用domObject。getBoundingClientRect()

        // 获取小球在页面中的位置 
        const ballPositon=this.$refs.ball.getBoundingClientRect();
        // 获取徽标的位置
        const logoPosition=document.getElementById("logo").getBoundingClientRect();
        // 横向位移
        const xDist=logoPosition.left-ballPositon.left;
        // 纵向位移
        const yDist=logoPosition.top-ballPositon.top;
        el.offsetWidth; //没有这个就没有动画
        el.style.transform=`translate(${xDist}px,${yDist}px)`;
        el.style.transition="all 0.6s cubic-bezier(.4,-0.3,1,.68)";
        done()
    },
    afterEnter(el){
        this.ballFlag=!this.ballFlag
    },
    getselectedCount(count){
        // 当子组件把 选中的数量传递给父组件的时候，把选中的值保存到data上      
        this.selectedcount=count;    
    }
  },
  components: {
    swiper: swipelist,
    numberbox: numberbox
  }
};
</script>

<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;
  margin-bottom: 60px;
  .ball{
      height: 15px;
      width:15px;
      background-color: red;
      border-radius:50%;
      position:absolute;
      top:393px;
      left:152px;
      z-index:99;
  }
  .old {
    text-decoration: line-through;
    font-size: 13px;
    margin-right: 10px;
  }
  .new {
    color: red;
    font-size: 16px;
  }
  .mui-card-footer {
    display: block;
    padding-top: 20px;
  }
}
</style>
